<template>
<el-container  class="body">
        <el-header>
          <i class="el-icon-arrow-left" ></i>
            <h3>创建圈子</h3>
             <el-button icon="el-icon-search" class="el-circle-search" round></el-button>
        </el-header>
        <el-main>
            <el-form  :model="circle" :rules="rules2" ref="circle" label-width="100px">
              <el-form-item prop="c_name" label="圈子名称">
                <el-input v-model="circle.c_name" auto-complete="off"  placeholder="请输入圈子名称"></el-input>
              </el-form-item>
              <el-form-item prop="c_user" label="真实姓名">
                <el-input v-model="circle.c_user" auto-complete="off"  placeholder="请输入真实姓名"></el-input>
              </el-form-item>
              <el-form-item prop="c_body" label="圈子主体">
                <el-input v-model="circle.c_body" auto-complete="off"  placeholder="请输入圈子主体"></el-input>
              </el-form-item>
               <el-form-item  label="主体认证" class="el-form-item-active">
              </el-form-item>
              <p class="el-content-notice">仅支持JPG,JPEG和PNG格式，大小不超过2兆.文字应清晰可辨。企业名称必须与您填写的一致。</p>
              <el-upload
                class="avatar-uploader"
                :action="importFileUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-button type="danger" class="el-botton-active" @click="submitCircle">创建圈子</el-button>
            </el-form>
        </el-main>
</el-container>
  
</template>

<script>

  export default {
    data() {
      return {
        logining: false,
        circle:{
          c_name:'',
          checkPass: ''
        },
        rules2: {
          c_name: [
            { required: true, message: '请输入圈子名称' , trigger: 'blur'},
            //{ validator: validaePass }
          ],
          c_user: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          c_body: [
            { required: true, message: '请输入圈子主体', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        },
        checked: true,
        imageUrl: '',
        dialogImageUrl: '',
        dialogVisible: false,
        handleup:true,
        importFileUrl: 'http://fc.x.e000.com/api.php?s=/upload/upimage',
      };
    },
    methods: {
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      submitCircle:function(){
        let that = this;
        var c_name = that.circle.c_name;
        var c_user = that.circle.c_user;
        var c_body = that.circle.c_body;
        var c_logo = 'demo'; 

        var _this = this;
        this.$refs.circle.validate((valid) => {
            if(valid){ 
              this.$fetch(
              'http://www.friendring.com/api.php/Circle/createCircle',{c_name:c_name,c_user:c_user,c_body:c_body,c_logo:c_logo})
            .then((res) => {
              if(res.code == 200){
                  this.$alert('创建成功,等待审核', '温馨提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                      if(action == 'confirm'){
                        this.$router.push({path: "/CircleIndex"});
                      }
                    }
                  });
              }else{
                this.$alert(res.msg, '温馨提示', {
                    confirmButtonText: '确定',
                  });
              }
                    
            })
            } 
        });
        
      },
      


    }
  }

</script>
<style >
@import '../common/css/circle.css'

</style>
